<template>
  <div class="classes">
    <!-- Main Wrapper -->
    <div class="main-wrapper">
      <Header/>
      <SideBar/>
      <!-- Page Wrapper -->
      <div class="page-wrapper"><!-- :is="currentView" -->
        <div class="content container-fluid">
          <BreadCrumb/>
          <h2>班级管理</h2>

          <el-main class="system">
            班级
            <el-select v-model="class_choice_id" filterable placeholder="请输入" clearable>
              <el-option
                v-for="item in class_options"
                :key="item.classId"
                :label="item.className"
                :value="item.classId">
              </el-option>
            </el-select>
            年级
            <el-input v-model="gradeYear" placeholder="" class="account" clearable></el-input>
            所属部门
            <el-select v-model="dept_choice_id" filterable placeholder="" clearable>
              <el-option
                v-for="item in dept_options"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId">
              </el-option>
            </el-select>
            <br>
            班级教师
            <el-select v-model="staff_choice_id" filterable placeholder="" clearable>
              <el-option
                v-for="item in tea_options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button @click="clearQueryItems">Clear</el-button>
            &nbsp;
            <el-button type="primary" @click="queryAllClass">查询</el-button>
            <div class="ends" >
                <el-button type="primary" @click="newClassFunc">班级新增</el-button>
            </div>
          </el-main>


          <el-table :data="tableData" border style="width: 100%"> <!--height="250"-->
              <el-table-column prop="gradeYear" label="年级" style="width: 40%"></el-table-column>
              <el-table-column prop="className" label="班级名称" style="width: 40%"></el-table-column>
              <el-table-column prop="classNo" label="班级编号" style="width: 40%"></el-table-column>
              <el-table-column prop="deptName" label="所属部门" style="width: 40%"></el-table-column>
              <el-table-column prop="staffName" label="班级负责人" style="width: 40%"></el-table-column>
              <el-table-column label="操作" style="width: 20%">
                  <template slot-scope="scope">
                      <el-button @click="updateHandleClick(scope.row)" type="text" size="small">修改</el-button>
                      <el-button @click="delFunc(scope.row,scope.$index,tableData)" type="text" size="small">删除</el-button>
                      <!-- @click="handleClick(scope.row,scope.$index,tableData)" -->
                  </template>
              </el-table-column>
          </el-table>
          <el-col :span="24" class="xtes">
              <el-col :span="24" >
              <div class="xtesbox">
              <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="currentPage"
                          :page-sizes="[10, 20, 30, 40]"
                          :page-size="pageSize"
                          class
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total"
                      >
                      </el-pagination></div>
              </el-col>
          </el-col>

<el-dialog
  title="新增班级"
  :visible.sync="dialogVisibleAdd"
  width="30%">
  <span class="content-b">年级</span><el-input v-model="add_gradeYear" placeholder="" size="medium"></el-input><br>
  <span class="content-b">班级名称</span><el-input v-model="add_className" placeholder="" size="medium"></el-input><br>
  <span class="content-b">班别</span><el-input v-model="add_classNo" placeholder="" size="medium"></el-input><br>
  <span class="content-b">所属部门</span><el-select v-model="add_dept_id" filterable placeholder="请选择">
    <el-option
      v-for="item in dept_options"
      :key="item.deptId"
      :label="item.deptName"
      :value="item.deptId">
    </el-option>
  </el-select><br>
  <span class="content-b">班级教师</span><el-select v-model="add_staff_id" filterable placeholder="请选择">
    <el-option
      v-for="item in tea_options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
    <el-button type="primary" @click="addClass">确 定</el-button>
  </span>
</el-dialog>

<el-dialog
  title="修改班级"
  :visible.sync="dialogVisibleUpd"
  width="30%">
  <span class="content-b">年级</span><el-input v-model="upd_gradeYear" placeholder="" size="medium"></el-input><br>
  <span class="content-b">班级名称</span><el-input v-model="upd_className" placeholder="" size="medium"></el-input><br>
  <span class="content-b">班别</span><el-input v-model="upd_classNo" placeholder="" size="medium"></el-input><br>
  <span class="content-b">所属部门</span><el-select v-model="upd_dept_id" filterable placeholder="请选择">
    <el-option
      v-for="item in dept_options"
      :key="item.deptId"
      :label="item.deptName"
      :value="item.deptId">
    </el-option>
  </el-select><br>
  <span class="content-b">班级教师</span><el-select v-model="upd_staff_id" filterable placeholder="请选择">
    <el-option
      v-for="item in tea_options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleUpd = false">取 消</el-button>
    <el-button type="primary" @click="amendClass">确 定</el-button>
  </span>
</el-dialog>

<el-dialog
  title="删除班级"
  :visible.sync="dialogVisibleDel"
  width="30%">
  <span>确认删除<font style="color: blue">{{del_class_name}}</font>班级？(Are you sure to delete it?)</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleDel = false">取 消</el-button>
    <el-button type="primary" @click="delClass">确 定</el-button>
  </span>
</el-dialog>

        </div>
      </div>
      <!-- /Page Wrapper -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import BreadCrumb from '@/components/Breadcrumb'
import Header from '@/components/Header'
import SideBar from '@/components/SideBar'
export default {
  created(){
    this.queryClassDropDownList()
    this.queryStaffDropDownList()
    this.queryDeptDropDownList()
    this.queryAllClass()
  },
  beforeDestroy(){
  },
  mounted(){
  },
  data(){
      return {
        currentPage: 1,
		    pageSize: 10,
		    total: 0,
        tableData:[],
        // 下拉框数据填充
        dept_options: [],
        tea_options: [],
        class_options: [],
        // 查询参数
        class_choice_id: '',
        gradeYear: '',
        dept_choice_id: '',
        staff_choice_id: '',
        // 新增班级
        dialogVisibleAdd: false,
        add_gradeYear: '',
        add_className: '',
        add_classNo: '',
        add_dept_id: '',
        add_staff_id: '',
        // 修改班级
        dialogVisibleUpd: false,
        upd_classId: '',
        upd_gradeYear: '',
        upd_className: '',
        upd_classNo: '',
        upd_dept_id: '',
        upd_staff_id: '',
        // 删除班级
        dialogVisibleDel: false,
        del_class_name: '',
        del_class_id: ''
      }
  },
  methods: {
      // 班级下拉
      queryClassDropDownList(){
        let config = {
            method: 'get',
            url: 'edu/admin/class_list',
            headers: {
                "Content-Type": "application/json;"
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.class_options = response.data.list
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 教师下拉
      queryStaffDropDownList(){
        let config = {
            method: 'get',
            url: 'edu/admin/tea_list2',
            headers: {
                "Content-Type": "application/json;"
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.tea_options = response.data.list
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 部门下拉
      queryDeptDropDownList(){
        let config = {
            method: 'get',
            url: 'edu/admin/dept'
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.dept_options=response.data.deptList
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 分页查询相关功能函数
      handleSizeChange(val) {
        this.pageSize = val;
        this.queryAllClass()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.queryAllClass()
        console.log(`当前页: ${val}`);
      },
      handleSelectionChange(data) {
        console.log('获取row', data)
        // 当前多选的数据
        this.multipleSelection = data;
      },
      // 查询所有班级:  这里由于get请求无法携带payload，改为post
      queryAllClass(){
        this.tableData=[]
        this.total=0
        let config = {
            method: 'post',
            url: 'edu/admin/classQuery',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                classId: this.class_choice_id,
                gradeYear: this.gradeYear,
                deptId: this.dept_choice_id,
                staffId: this.staff_choice_id
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.tableData=response.data.page.list
                this.total=response.data.page.totalCount
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 新增班级
      newClassFunc(){
        this.add_gradeYear = ''
        this.add_className = ''
        this.add_classNo = ''
        this.add_dept_id = ''
        this.add_staff_id = ''
        this.dialogVisibleAdd = true
      },
      addClass(){
        this.tableData=[]
        this.total=0
        let config = {
            method: 'post',
            url: 'edu/admin/class',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                gradeYear: this.add_gradeYear,
                className: this.add_className,
                classNo: this.add_classNo,
                deptId: this.add_dept_id,
                staffId: this.add_staff_id
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.$message.success(response.data.msg);
                this.dialogVisibleAdd = false
                this.queryAllClass()
                this.queryClassDropDownList()
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 修改班级
      updateHandleClick(row){
        this.upd_gradeYear = row.gradeYear
        this.upd_className = row.className
        this.upd_classNo = row.classNo
        this.upd_dept_id = row.deptId
        this.upd_staff_id = row.staffId
        this.upd_classId = row.classId
        this.dialogVisibleUpd = true
      },
      amendClass(){
        let config = {
            method: 'put',
            url: 'edu/admin/class',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                classId: this.upd_classId,
                gradeYear: this.upd_gradeYear,
                className: this.upd_className,
                classNo: this.upd_classNo,
                deptId: this.upd_dept_id,
                staffId: this.upd_staff_id
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.$message.success(response.data.msg);
                this.dialogVisibleUpd = false
                this.queryAllClass()
                this.queryClassDropDownList()
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 删除班级
      delFunc(row,index,tableData){
        this.del_class_name = row.gradeYear + '-' + row.className + '-' + row.classNo
        this.del_class_id = row.classId
        this.dialogVisibleDel = true
      },
      delClass(){
        let config = {
            method: 'delete',
            url: 'edu/admin/class',
            headers: {
                "Content-Type": "application/json;"
            },
            data: {
                classId: this.del_class_id
            }
        };
        this.$http(config)
        .then((response)=>{
            if (response.data.statusCode == 1){
                this.$message.success(response.data.msg);
                this.dialogVisibleDel = false
                this.queryAllClass()
                this.queryClassDropDownList()
            }else{
                this.$message.warning(response.data.msg);
            }
        }).catch(error => {
            this.$message.error("query failed, please try again later.");
            console.log(error)
        });
      },
      // 清除所有查询条件
      clearQueryItems(){
        this.class_choice_id = ''
        this.gradeYear = ''
        this.dept_choice_id = ''
        this.staff_choice_id = ''
      }
  },
  components: {
	Header,
    BreadCrumb,
	  SideBar
  }
}
</script>

<style>
.account{
    width: 200px;
    height: 35px;
    margin-bottom: 20px;
    padding-left: 10px;
}
.xtes {
    margin-top: 20px;
    margin-bottom: 20px;
}
.xtesbox{
    float: right;
    padding-right: 150px;
}
.system {
    background-color: #fff;
    border-radius: 0 0 15px 15px;
    font-size: 18px;
}
.ends {
    margin-bottom: 20px;
}
</style>
